﻿@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@using ProjetoSolo.QueroGas.Dominio.Entidades
@model ProjetoSolo.QueroGas.Dominio.Entidades.Empresa

<div class="container">
    <form method="post" action="/empresa/gravacao" id="formularioEmpresa">
        @Html.ValidationSummary(true)
        <h1>Cadastre sua empresa gratuitamente!</h1>
        <div id="divSlider">
            <h3>Dados Básicos</h3>
            <section>
                <fieldset>
                    <legend>Passo 1: Digite o nome de sua empresa e os dados de seu usuário.</legend>

                    <div class="form-group">
                        <label>Nome da Empresa</label>
                        @Html.EditorFor(model => model.Nome)
                        @Html.ValidationMessageFor(model => model.Nome)
                    </div>
                    <div class="form-group">
                        <label>DDD</label>
                        @Html.EditorFor(model => model.Telefones[0].Ddd)
                        @Html.ValidationMessageFor(model => model.Telefones[0].Ddd)
                    </div>
                    <div class="form-group">
                        @Html.DropDownListFor(empresa => empresa.Telefones[0].Tipo, 
                        new List<SelectListItem> { new SelectListItem { Text = "Fixo", Value = "1" }, new SelectListItem { Text = "Celular", Value = "2" } })
                    </div>
                    <div class="form-group">
                        <label>Telefone</label>
                        @Html.EditorFor(model => model.Telefones[0].Numero)
                        @Html.ValidationMessageFor(model => model.Telefones[0].Numero)
                    </div>
                    <div class="form-group">
                        <label>Distribuidores</label>
                        <input type="checkbox" name="distribuidoras_" value="1" />Supergasbrás
                        <input type="checkbox" name="distribuidoras_" value="2" />Ultragás
                        <input type="checkbox" name="distribuidoras_" value="3" />Liquigás
                    </div>
                </fieldset>
            </section>
            <h3>Endereço</h3>
            <section>
                <fieldset>
                    <legend>Passo 2: Digite o nome de sua empresa e os dados de seu usuário.</legend>

                    <div class="form-group">
                        <label>CEP</label>
                        @Html.EditorFor(model => model.Endereco.Cep)
                        @Html.ValidationMessageFor(model => model.Endereco.Cep)
                        <input type="button" name="buscarCep" id="buscarCep" value="Buscar cep" class="btn" />
                        <label id="labelErroCep"></label>
                    </div>

                    <div class="form-group">
                        <label>UF</label>
                        @Html.TextBoxFor(model => model.Endereco.Estado, null, new { @readonly = "readonly" })
                        @Html.ValidationMessageFor(model => model.Endereco.Estado)
                    </div>

                    <div class="form-group">
                        <label>Cidade</label>
                        @Html.TextBoxFor(model => model.Endereco.Cidade, new { @readonly = "readonly" })
                        @Html.ValidationMessageFor(model => model.Endereco.Cidade)
                    </div>

                    <div class="form-group">
                        <label>Bairro</label>
                        @Html.TextBoxFor(model => model.Endereco.Bairro, new { @readonly = "readonly" })
                        @Html.ValidationMessageFor(model => model.Endereco.Bairro)
                    </div>

                    <div class="form-group">
                        <label>Logradouro</label>
                        @Html.TextBoxFor(model => model.Endereco.Logradouro, new { @readonly = "readonly" })
                        @Html.ValidationMessageFor(model => model.Endereco.Logradouro)
                    </div>

                    <div class="form-group">
                        <label>Complemento</label>
                        @Html.EditorFor(model => model.Endereco.Complemento)
                        @Html.ValidationMessageFor(model => model.Endereco.Complemento)
                    </div>
                    <br />
                    <div id="map-canvas"></div>
                </fieldset>
            </section>
            <h3>Produtos</h3>
            <section>
                <fieldset>
                    <legend>Passo 3: Inclua os produtos oferecidos pela sua empresa e seus respecivos preços.</legend>
                    <input type="hidden" id="produtos" name="produtos_" />
                    <div class="form-group">
                        <label>Selecione o produto</label> <br />
                        <select id="selectProduto">
                            <option value="1">Botijão de 5kg</option>
                            <option value="2">Botijão de 8kg</option>
                            <option value="3">Botijão de 13kg</option>
                            <option value="4">Botijão de 20kg</option>
                            <option value="5">Botijão de 45kg</option>
                            <option value="6">Botijão de 90kg</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Preencha o preço do produto</label>
                        <input type="text" name="ValorProduto" id="txtValorProduto" />
                        <button type="button" class="btn btn-default" id="btnAdicionarProduto">Adicionar</button>
                    </div>
                    <span class="glyphicon glyphicon-plus"></span>
                    <br />
                    <table class="table" id="tableProdutos">
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th>Valor</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </fieldset>
            </section>
        </div>
    </form>
</div>

<script type="text/javascript">
    // global vars
    var geocoder;
    var map;
    var produtos = new Array();
    var mapsLoaded = new Boolean();

    $(document).ready(function () {
        $('#divSlider').steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            labels: {
                finish: "Finalizar",
                next: "Próximo Passo",
                previous: "Passo Anterior"
            },
            onStepChanging: function (event, currentIndex, newIndex) {
                if (!mapsLoaded)
                    inicializarMapa();
                $("#formularioEmpresa").validate().settings.ignore = ":disabled,:hidden";
                return $("#formularioEmpresa").valid();
            },
            onFinishing: function (event, currentIndex) {
                if (produtos.length == 0) {
                    return false;
                }
                $("#produtos").val(JSON.stringify(produtos));
                $("#formularioEmpresa").submit();
            },
            onFinished: function (event, currentIndex) {
                return true;
            }
        });

        $('#tableProdutos').hide();

        $("#btnAdicionarProduto").click(function () {
            $("#tableProdutos tbody").append("<tr><td>" + $("#selectProduto option:selected").text() + "</td><td>" + $("#txtValorProduto").val() +
                "</td><td><button type=\"button\" class=\"btn btn-default btnExcluirProduto\" data-id=\"" + $("#tableProdutos tbody tr").length + "\" >Excluir</button></td></tr>");
            produtos.push({ "IdProduto": $("#selectProduto option:selected").val(), "Preco": $("#txtValorProduto").val().replace('R$ ', '') });
            if (produtos.length > 0)
                $('#tableProdutos').show();
        });

        //$(".btnExcluirProduto").click(function () {
        $("#divSlider").on("click", ".btnExcluirProduto", function () {
            $(this).closest("tr").remove();
            return false;
        });

        $("#Telefones_0__Numero").mask("9999-9999");
        $("#Endereco_Cep").mask("99999-999");
        $("#txtValorProduto").maskMoney({ symbol: 'R$ ', thousands: '.', decimal: ',', symbolStay: true });
        $("#buscarCep").click(function () {
            var url = "/empresa/buscar_cep";
            var cep = $("#Endereco_Cep").val();
            $.ajax({
                type: "POST",
                url: "/empresa/buscar_cep",
                data: "{'cep':'" + cep + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    preencherFormEnderecoEmpresa(result);
                    inicializarMapa();
                },
                error: function (result, status, error) {
                    displayExceptionError(result);
                }
            });
        });
    });

    // maps
    function inicializarMapa() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var zoom = (document.getElementById('Endereco_Cep').value == '') ? 4 : 15

        var mapOptions = {
            zoom: zoom,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        marcarMapa();

        mapsLoaded = true;
    }

    function marcarMapa() {
        var address = '';

        if (document.getElementById('Endereco_Cep').value == '')
            address = 'Distrito Federal, Brasil';
        else
            address = document.getElementById('Endereco_Cep').value;
        geocoder.geocode({ 'address': address + ', Brasil' }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                if (document.getElementById('Endereco_Cep').value != '') {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    // end maps

    function removerTelefone(id) {
        $('#Ddd_' + id).remove();
        $('#Numero_' + id).remove();
        $('#btnRemoverTelefone_' + id).remove();
    }

    function preencherFormEnderecoEmpresa(data) {
        $("#Endereco_Estado").val(data.Estado);
        $("#Endereco_Cidade").val(data.Cidade);
        $("#Endereco_Bairro").val(data.Bairro);

        if (data.Logradouro == null || data.Logradouro == '') {
            $("#Endereco_Logradouro").removeAttr("readonly");
            $("#labelErro").text("Não foi encontrado um logradouro para o CEP informado. Favor preencha um logradouro.");
            $("#labelErro").show();
        }
        else {
            $("#Endereco_Logradouro").attr("readonly", "readonly");
            $("#labelErroCep").hide();
        }

        $("#Endereco_Logradouro").val(data.Logradouro);
    }

    function displayExceptionError(result) {
        var msg = JSON.parse(result.responseText);
        alert(msg.Message);
    }
</script>
